<%@ page language="java" contentType="text/html;charset=utf-8"%>
<!doctype html>
<!--[if lt IE 7]><html lang="en-CA" class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html lang="en-CA" class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html lang="en-CA" class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en-CA" class="no-js">
<!--<![endif]-->
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Guhappy</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<%
		String path = request.getContextPath();
		String basePath = request.getScheme() + "://"
				+ request.getServerName() + ":" + request.getServerPort()
				+ path + "/";
	%>
	<base href="<%=basePath%>">
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/header.css" rel="stylesheet">
	<link href="css/common.css" rel="stylesheet">
	<link href="css/buttons.css" rel="stylesheet">
	<style type="text/css">
		
	</style>
</head>
<body>
	<jsp:include page="header.jsp" />
	<div class="row" style="margin-top:80px">
		<div class="col-xs-12 col-md-8 col-md-offset-2">
			<div id='popularStocks' class='marquee-with-options'>滚动条</div>
		</div>
	</div>
	
	<div class="row" style="margin-top:20px">
		<div class="container col-md-8 col-xs-offset-1 col-md-offset-2">
			<form class="form-inline" role="form">
				<label for="reg_email">Registered Email Address:&nbsp;&nbsp;</label>
				<input type="text" class="form-control" id="reg_email" style="width:300px" placeholder="Please give it a default email address">
				<br><br>
				<h4>Secret question:</h4>
				<label for="answer">Generated Secret question</label>
				<div>
					<input type="text" class="form-control" id="answer" style="width:500px" placeholder="Please answer this question.">
				</div>
				<div style="margin-top:45px">
					<button class="btn btn-blue">Submit</button>
				</div>
			</form>
		</div>
	<div>
	
</body>
<script src="js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script src="js/header.js"></script>
<script type="text/javascript" src="js/bar.js"></script>
<script>
$(function() {
	// Setup drop down buttons.
	
	var $mwo = $('.marquee-with-options');
	
	$.get("data/popular.json",function(data,status){
		if(status=="success") {
			var html = '';
			var data = JSON && JSON.parse(JSON.stringify(data)) || $.parseJSON(data);
			for(var i in data.stocks) {
				var inner = '<span class="popularStock" style="color:';
				var stock = data.stocks[i];
				if(stock.change.indexOf('-') > -1) {
					inner += '#AA1111;">';
				}
				else {
					inner += '#228822;">';
				}
				inner += stock.symbol + ' ' + stock.change + '</span>&nbsp;&nbsp;&nbsp;&nbsp;';
				html += inner;
			}
			
			$("#popularStocks").html(function(i,origHtml){
				return html; 
			});
			
			$mwo.marquee();
			
			var showing = false;
			var symbol = "";
			var currentSymbol = "";
			$(".popularStock").click(function(){
			});
		}
	});
});
</script>
</html>